<template>
  <div class="app-container">

    <el-button type="primary" @click="handleAddRole">新增</el-button>
    <el-select v-model="searchTd" placeholder="请选择">
    <el-option
      v-for="item in searchType"
      :key="item.id"
      :label="item.name"
      :value="item.id">
    </el-option>
  </el-select>
    <el-input v-model="searchInput" style="width:150px" placeholder="请输入内容"></el-input>
    <el-button type="primary" icon="el-icon-search" @click="getList">搜索</el-button>
    <el-button type="primary"   @click="chongzhi">重置</el-button>
      <div style="height:650px;overflow: auto;">
          <el-table :data="rolesList" v-loading='loading' style="width: 100%;margin-top:30px;" border>
             <el-table-column width="80"  label="ID" >
              <template slot-scope="scope">
                {{ scope.row.id }}
              </template>
            </el-table-column>
            <el-table-column  label="名称" >
              <template slot-scope="scope">
                {{ scope.row.title }}
              </template>
            </el-table-column>
            <el-table-column  label="所属类别" >
              <template slot-scope="scope">
                {{ typeList(scope.row.type) }}
              </template>
            </el-table-column>
            <!-- <el-table-column align="center" label="图片">
              <template slot-scope="scope">
                <img :src="scope.row.img" :alt="scope.row.img" style="width: 100px; height: 50px;" />
              </template>
            </el-table-column> -->
             <!-- <el-table-column align="center" label="内容简介">
              <template slot-scope="scope">
                {{ scope.row.simpleTxt}}
              </template>
            </el-table-column> -->
            <!-- <el-table-column align="center" label="内容详情">
              <template slot-scope="scope">
                {{ scope.row.content}}
              </template>
            </el-table-column> -->
            <el-table-column align="center" label="下载链接">
              <template slot-scope="scope">
                {{ scope.row.downUrl}}
              </template>
            </el-table-column>
            <el-table-column align="center" width="80"  label="点击次数">
              <template slot-scope="scope">
                {{ scope.row.clickNum}}
              </template>
            </el-table-column>
            <el-table-column align="center" label="排序">
              <template slot-scope="scope">
                {{ scope.row.sortNum}}
              </template>
            </el-table-column>

            <el-table-column align="center" label="操作">
              <template slot-scope="scope">
                  <el-button type="primary" size="mini" @click="handleEdit(scope.row)">修改</el-button>
                  <el-popconfirm title="是否删除" @confirm='handleDelete(scope.row)'>
                      <el-button slot="reference" type="danger">删除</el-button>
                  </el-popconfirm>
              </template>
            </el-table-column>

          </el-table>
    </div>
    <el-pagination
            background
            layout="prev, pager, next,sizes,total"
            :total='total'
            @current-change='current_change'
            @size-change='size_change'
            style="text-align: center; margin-top: 60px;"
            :page-sizes="[10, 50, 100, 1000]"
            >
    </el-pagination>

  </div>
</template>

<script>
import api from '@/api/website/cms'


export default {
  name: 'cmsList',

  data() {
    return {
        searchInput:'',
        searchType:[{id:1,name:"资质展示"},{id:2,name:"新闻动态"},{id:4,name:"产品管理-引擎程序"},{id:5,name:"产品管理-游戏网关"},{id:6,name:"产品管理-配套工具"},{id:7,name:"技术文档-热门问题"},{id:8,name:"技术文档-更新日志"},{id:9,name:"技术文档-说明文档"},{id:10,name:"教程中心"}],//类型,
        searchTd:'',
        rolesList:[],
        total:0,
        limit:10,//默认10条
        page:1,//当前页码
        loading:false,
    }
  },
  created() {
  
  },
  mounted(){
    this.getList()
  },
  methods: {
     typeList(e){
       let name;
       switch (e){
          case 1:
            name="资质展示"
            break;
          case 2:
            name="新闻动态"
            break;
          case 4:
            name="产品管理-引擎程序"
            break;
          case 5:
            name="产品管理-游戏网关"
            break;
          case 6:
            name="产品管理-配套工具"
            break;
          case 7:
            name="技术文档-热门问题"
            break;
          case 8:
            name="技术文档-更新日志"
            break;
          case 9:
            name="技术文档-说明文档"
            break;
          case 10:
            name="教程中心"
            break;
       }

       return name

     },
     handleAddRole(){
        this.$router.push({ path: './create'})
      },
      handleEdit(e){
          this.$router.push({ path: './edit',query:{id:e.id}})
      },
      handleDelete(e){
         api.Delete(e).then(res=>{
            if(res.data.errno==0)
            {
              this.$message({
                message: '删除成功',
                type: 'success'
              });
              this.getList()
            }
         })
      },
    current_change(e){
       this.page=e
       this.getList()
     },
     size_change(e){
       this.limit=e
       this.getList()
     },
     chongzhi(){
       this.searchInput=""
        this.searchTd=""
        this.getList()
     },
    getList() {
      this.loading = true
      api.list({
        limit:this.limit,
        page:this.page,
        title:this.searchInput,
        type:this.searchTd,
      }).then(res => {
        if(res.data.errno==0){
                this.rolesList=res.data.data.list
                this.total=res.data.data.total
                this.limit=res.data.data.limit
                this.page=res.data.data.page
                this.loading=false
            }
      }).catch(() => {
        this.Loading = false
      })
    },
  }
}
</script>
